<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card shadow="never" class="card">
          <div id="charts_one" style="width:100%;min-height:80vh">
            <Search size='small' :searchVisible="searchVisible" :searchData.sync="searchData"  :searchForm="searchForm" @refresh_list="index"></Search>
            <div class="btn-group" style="margin-bottom:11px;">
              <div>
                <el-button type="warning"  size="mini" icon="el-icon-download"  @click="dumpdataPiece(ids)" v-if="checkPermission('/app/worktime/dumpdataPiece.html')" >导出</el-button>
              </div>
              <table-tool :searchVisible.sync="searchVisible"  :fieldList="fieldList" @refresh_list="index" :searchTool="true"></table-tool>
            </div>
            <el-table :row-class-name="rowClass" @selection-change="selection"  @row-click="handleRowClick"  row-key="id"  :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading"  ref="multipleTable" border class="eltable" :data="list"  style="width: 100%">

              <el-table-column align="center" type="selection" width="42"></el-table-column>
              <el-table-column align="center" type="index" label="No." width="50" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[0].checked" property="dayTime" label="日期" show-overflow-tooltip width="" >

              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[1].checked" property="fwork" label="所属车间" show-overflow-tooltip width="" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[2].checked" property="userName" label="员工姓名" show-overflow-tooltip width="" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[3].checked" property="taskBillNo" label="生产订单" show-overflow-tooltip width="" >
              </el-table-column>
              <el-table-column align="center"  v-if="fieldList[4].checked" property="piece" label="计件分配金额" show-overflow-tooltip width="" >

              </el-table-column>

            </el-table>
            <Page :total="page_data.total" :page.sync="page_data.page" :limit.sync="page_data.limit" @pagination="index" />
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import {
  dumpdataPiece,
  pieceIndex,
} from '@/api/app/worktime'
import Search from '@/components/common/Search.vue'
import Page from '@/components/common/Page.vue'
import TableTool from '@/components/common/TableTool.vue'
import { confirm,param2Obj } from '@/utils/common'
import XLSX from "xlsx";

export default {
  name:'piecerote',
  components: {
    Search,
    Page,
    TableTool,

  },
  data(){
    return {

      fieldList:[
        {lable:'ID',checked:true},
        {lable:'dayTime',checked:true},
        {lable:'fwork',checked:true},
        {lable:'userName',checked:true},
        {lable:'taskBillNo',checked:true},
        {lable:'piece',checked:true}
      ],
      ids: [],
      selectRows:[],
      selectTotal:0,
      single:true,
      multiple:true,
      list: [],
      small_tables:{},
      detailInfo:{},
      loading: false,
      page_data: {
        limit: 20,
        page: 1,
        total:20,
      },
      searchVisible:true,
      searchForm:[],
      searchData:{},
      ws:{},
      dumppage:1,
      exceldata:[],
      filename:'',
    }
  },
  methods: {
    dumpdataPiece(){
      confirm({content:'确定要操作吗'}).then(() => {
        this.dumpshow = true
        this.confirmdumpdata()
      }).catch(() => {})
    },
    confirmdumpdata(){
      dumpdataPiece({page:this.dumppage}).then(res => {
        if(res.data.length > 0){
          if(this.dumppage == 1){
            this.exceldata.push(res.header)
          }
          res.data.forEach((item) => {
            this.exceldata.push(Object.values(item))
          })
          this.percentage = res.percentage
          this.filename = res.filename
          this.ws = XLSX.utils.aoa_to_sheet(this.exceldata)
          this.dumppage = this.dumppage + 1
          this.confirmdumpdata()
        }else{
          let wb = XLSX.utils.book_new()
          XLSX.utils.book_append_sheet(wb, this.ws, '工时报表')
          XLSX.writeFile(wb, this.filename)
          this.dumpshow = false
        }
      })
    },
    closedialog(){
      this.dumpshow = false
    },
    index(){
      let param = {limit:this.page_data.limit,page:this.page_data.page}
      Object.assign(param, this.searchData,param2Obj(this.$route.fullPath))
      this.loading = true
      pieceIndex(param).then(res => {
        this.list = res.data
        this.small_tables=res.sql_field_data
        this.page_data.total = res.total
        this.loading = false
        if(this.page_data.page == 1){
          this.searchForm = [
            {type:'Input',label:('员工姓名'),prop:'userName',width:'150px'},
            {type:'datetime',label:('创建日期'),prop:'createTime',width:'150px'},
          ]
        }
      })
    },
    updateExt(row,field){
      if(row.id){
        updateExt({id:row.id,[field]:row[field]}).then(res => {
          this.$message({message: this.$t('system.success'), type: 'success'})
        })
      }
    },

    selection(selection) {
      this.selectRows=selection
      this.selectTotal=selection.length
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    handleRowClick(row, rowIndex,event){
      if(event.target.className !== 'el-input__inner'){
        this.$refs.multipleTable.toggleRowSelection(row)
      }
    },
    rowClass ({ row, rowIndex }) {
      for(let i=0;i<this.ids.length;i++) {
        if (row.id === this.ids[i]) {
          return 'rowLight'
        }
      }
    },
  },
  mounted(){
    this.index()
  }
}
</script>
<style  lang="scss">
@import '@/assets/scss/common.scss';
</style>